﻿<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Loaded="javascript:root_Loaded"
        x:Name="root"        
        Width="310"
        Height="300"           
        Clip="F1 M 310.500000,292.500000 C 310.500000,296.917969 306.917969,300.500000 302.500000,300.500000 L 8.500000,300.500000 C 4.082031,300.500000 0.500000,296.917969 0.500000,292.500000 L 0.500000,8.500000 C 0.500000,4.081543 4.082031,0.500000 8.500000,0.500000 L 302.500000,0.500000 C 306.917969,0.500000 310.500000,4.081543 310.500000,8.500000 L 310.500000,292.500000 Z"
        >
     <Canvas.Background>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
               <LinearGradientBrush.GradientStops>
                    <GradientStop Color="#000" Offset="0"/>
                    <GradientStop Color="#000" Offset="0.005"/>
                    <GradientStop Color="#5d6680" Offset="0.04"/>
                    <GradientStop Color="#576078" Offset="0.84"/>
                    <GradientStop Color="#262b34" Offset="0.89"/>
                    <GradientStop Color="#000" Offset="0.93"/>
                    <GradientStop Color="#000" Offset="1"/>
               </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
     </Canvas.Background>
     <Canvas.Triggers>
          <!-- playGlow animations -->
          <EventTrigger RoutedEvent="Canvas.Loaded">
               <EventTrigger.Actions>
                    <BeginStoryboard>
                         <Storyboard BeginTime="1" x:Name="fadeInGlow">
                              <DoubleAnimation Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Opacity)" From="0" To="1" Duration="0:0:.5" />
                         </Storyboard>
                    </BeginStoryboard>
               </EventTrigger.Actions>
          </EventTrigger>
          <EventTrigger RoutedEvent="Canvas.Loaded">
               <EventTrigger.Actions>
                    <BeginStoryboard>
                         <Storyboard BeginTime="1" x:Name="fadeOutGlow">
                              <DoubleAnimation Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Opacity)" From="1" To="0" Duration="0:0:.5" />
                         </Storyboard>
                    </BeginStoryboard>
               </EventTrigger.Actions>
          </EventTrigger>
          <!-- timer animation -->
          <EventTrigger RoutedEvent="Canvas.Loaded">
               <EventTrigger.Actions>
                    <BeginStoryboard>
                         <Storyboard BeginTime="1" x:Name="timer" Completed="javascript:timerCompleted">
                              <DoubleAnimation Storyboard.TargetName="timerTarget" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="1" AutoReverse="true" Duration="0:0:.1" />
                         </Storyboard>
                    </BeginStoryboard>
               </EventTrigger.Actions>
          </EventTrigger>
     </Canvas.Triggers>
     <!-- Dummy element used for timer -->
     <Rectangle Opacity="0" x:Name="timerTarget"/>

     <!--Media Plane -->
     <Canvas Canvas.Left="5" Canvas.Top="7" Width="300" Height="225" Clip="F1 M 300.163574,224.000000 L 299.999512,224.000000 L 0.500000,224.000000 L 0.500000,224.000000 L 0.500000,3.500000 C 0.500000,1.843262 1.843262,0.500000 3.500000,0.500000 L 297.499512,0.500000 C 299.156738,0.500000 300.499512,1.843262 300.499512,3.500000 L 300.163574,224.000000 Z">
          <Canvas.RenderTransform>
               <ScaleTransform x:Name="mediaScale" ScaleX="1" ScaleY="1" />
          </Canvas.RenderTransform>
          <Image x:Name="mediaImage" Stretch="Fill" Canvas.Left="1" Canvas.Top="1" Width="300" Height="225" />
          <MediaElement x:Name="mediaElement" Stretch="Fill" Canvas.Left="1" Canvas.Top="1" Width="300" Height="225" Opacity="0" MouseLeftButtonUp="javascript:StopMouseUp" />
          <Path StrokeThickness="2" Stroke="#ff000000" Data="F1 M 300.163574,224.000000 L 299.999512,224.000000 L 0.500000,224.000000 L 0.500000,224.000000 L 0.500000,3.500000 C 0.500000,1.843262 1.843262,0.500000 3.500000,0.500000 L 297.499512,0.500000 C 299.156738,0.500000 300.499512,1.843262 300.499512,3.500000 L 300.163574,224.000000 Z" />
     </Canvas>

     <!--Media Playback -->
     <Canvas x:Name="mediaPlayback" Width="302" Height="14" Canvas.Left="5" Canvas.Top="229" MouseEnter="javascript:PlayBackMouseEnter" MouseLeave="javascript:PlayBackMouseLeave">
          <Canvas.RenderTransform>
               <ScaleTransform x:Name="playbackScale" ScaleX="1" ScaleY="1" />
          </Canvas.RenderTransform>
          <!-- bgd -->
          <Path StrokeThickness="1" Stroke="#181a1d" Data="F1 M 299.833496,11.703125 C 299.833496,13.357422 298.493652,14.697266 296.840332,14.697266 L 3.494141,14.697266 C 1.840332,14.697266 0.500488,13.357422 0.500488,11.703125 L 0.500000,0.645508 L 0.500000,0.645508 L 299.812012,0.500000 L 299.812012,0.500000 L 299.833496,11.703125 Z">
               <Path.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Color="#959fb9" Offset="0"/>
                              <GradientStop Color="#616b87" Offset="0.1"/>
                              <GradientStop Color="#545d73" Offset="1"/>
                         </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
               </Path.Fill>
          </Path>
          <!-- pathbgd -->
          <Rectangle Canvas.Left="6" Canvas.Top="6" Width="290" Height="3" RadiusX="1" RadiusY="1" Opacity="0.1" Fill="#000" />

          <!-- downloadProgess -->
          <Rectangle x:Name="downloadRect" Canvas.Left="6" Canvas.Top="6" Width="0" Height="3" Opacity="0.25" Fill="#023bdc" StrokeThickness="1" Stroke="#86cdff" RadiusX="1" RadiusY="1" />
          <!-- playProgress -->
          <Rectangle x:Name="progressRect" Canvas.Left="6" Canvas.Top="6" Width="0" Height="3" Fill="#023bdc" StrokeThickness="1" Stroke="#86cdff" RadiusX="1" RadiusY="1" />

          <!-- playHead -->
          <Rectangle x:Name="playHead" Opacity="0"  Canvas.Left="6" Canvas.Top="3" Width="16" Height="9" RadiusX="3" RadiusY="3" StrokeThickness="1" Stroke="#344384">
               <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Color="#fff" Offset="0"/>
                              <GradientStop Color="#073fb1" Offset="0.5"/>
                              <GradientStop Color="#6be8ff" Offset="1"/>
                         </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
               </Rectangle.Fill>
          </Rectangle>
     </Canvas>

     <!--Media Controls -->
     <Canvas x:Name="mediaControls" Width="302" Height="56" Canvas.Left="6" Canvas.Top="242">
          <!-- bgd -->
          <Path Canvas.Left="1" StrokeThickness="2" Stroke="#181a1d" Canvas.Top="0" Clip="F1 M 2,2 300,2 300,300 2,300"   Data="F1 M 296.978027,0.500000 C 296.978027,0.500000 286.753418,0.500000 276.260254,12.773438 C 276.260254,12.773438 267.381348,23.681641 264.420898,35.953125 C 264.420898,35.953125 260.923828,47.773438 254.734863,50.500000 L 148.499512,50.500000 L 148.478027,50.500000 L 42.242676,50.500000 C 36.053711,47.773438 32.556641,35.953125 32.556641,35.953125 C 29.596191,23.681641 20.717285,12.773438 20.717285,12.773438 C 10.223633,0.500488 0.000000,0.500488 0.000000,0.500488 L 296.978027,0.500000 Z"></Path>
          <Path Canvas.Left="1" Data="F1 M 296.978027,0.500000 C 296.978027,0.500000 286.753418,0.500000 276.260254,12.773438 C 276.260254,12.773438 267.381348,23.681641 264.420898,35.953125 C 264.420898,35.953125 260.923828,47.773438 254.734863,50.500000 L 148.499512,50.500000 L 148.478027,50.500000 L 42.242676,50.500000 C 36.053711,47.773438 32.556641,35.953125 32.556641,35.953125 C 29.596191,23.681641 20.717285,12.773438 20.717285,12.773438 C 10.223633,0.500488 0.000000,0.500488 0.000000,0.500488 L 296.978027,0.500000 Z">
               <Path.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                         <LinearGradientBrush.GradientStops>
                              <GradientStop Color="#545d73" Offset="0"/>
                              <GradientStop Color="#3c4352" Offset="0.5"/>
                              <GradientStop Color="#121212" Offset="0.5"/>
                              <GradientStop Color="#121212" Offset="0.85"/>
                              <GradientStop Color="#424c74" Offset="1"/>
                         </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
               </Path.Fill>
          </Path>

          <!-- Play -->
          <Canvas Canvas.Left="125" Canvas.Top="0" MouseLeftButtonUp="javascript:PlayMouseUp" MouseEnter="javascript:PlayMouseEnter" MouseLeave="javascript:PlayMouseLeave">
               <!-- Glow -->
               <Ellipse x:Name="playGlow" Opacity="0"  Width="50" Height="50">
                    <Ellipse.Fill>
                         <RadialGradientBrush>
                              <RadialGradientBrush.GradientStops>
                                   <GradientStop Color="#83e3ff" Offset="0.8"/>
                                   <GradientStop Color="#0083e3ff" Offset="0.95"/>
                              </RadialGradientBrush.GradientStops>
                         </RadialGradientBrush>
                    </Ellipse.Fill>
               </Ellipse>
               <!-- Bubble -->
               <Ellipse Canvas.Left="5" Canvas.Top="5" StrokeThickness="1" Stroke="#080ea0"  Width="40" Height="40">
                    <Ellipse.Fill>
                         <RadialGradientBrush GradientOrigin="0.5, 0.85">
                              <RadialGradientBrush.GradientStops>
                                   <GradientStop Color="#83e3ff" Offset="0"/>
                                   <GradientStop Color="#00089a" Offset="0.8"/>
                                   <GradientStop Color="#00089a" Offset="0.85"/>
                                   <GradientStop Color="#ccffffff" Offset="1"/>
                              </RadialGradientBrush.GradientStops>
                         </RadialGradientBrush>
                    </Ellipse.Fill>
               </Ellipse>
               <!-- Shine -->
               <Path Canvas.Left="5" Canvas.Top="5" Opacity="0.4"  Data="F1 M 0.530273,19.001465 L 3.030273,20.501465 C 3.030273,20.501465 8.030273,17.001465 20.530273,17.001465 C 20.530273,17.001465 28.530273,16.001465 36.530273,20.001465 L 39.030273,18.501465 C 39.030273,18.501465 41.030273,3.001465 20.530273,0.501465 C 20.530273,0.501465 2.530273,0.001465 0.530273,19.001465 Z">
                    <Path.Fill>
                         <RadialGradientBrush>
                              <RadialGradientBrush.GradientStops>
                                   <GradientStop Color="#fff" Offset="0"/>
                                   <GradientStop Color="#fff" Offset="0.3"/>
                                   <GradientStop Color="#00ffffff" Offset="1"/>
                              </RadialGradientBrush.GradientStops>
                         </RadialGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- Play Icon -->
               <Path x:Name="playIcon" Canvas.Left="18" Canvas.Top="16" StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 0.516602,2.111328 C 0.516602,2.111328 0.222656,-0.315918 2.097656,0.787598 L 16.472168,8.684082 C 16.472168,8.684082 17.832520,9.346191 16.251465,10.375488 L 1.950684,18.639648 C 1.950684,18.639648 0.516602,19.595215 0.516602,17.831055 L 0.516602,2.111328 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- Pause Icon -->
               <Canvas x:Name="pauseIcon" Opacity="0" Canvas.Left="16" Canvas.Top="15">
                    <Path Canvas.Left="1"  StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 7.083496,17.666504 C 7.083496,19.323730 5.740234,20.666504 4.083496,20.666504 L 3.500000,20.666504 C 1.843262,20.666504 0.500000,19.323730 0.500000,17.666504 L 0.500000,3.500000 C 0.500000,1.843262 1.843262,0.500000 3.500000,0.500000 L 4.083496,0.500000 C 5.740234,0.500000 7.083496,1.843262 7.083496,3.500000 L 7.083496,17.666504 Z">
                         <Path.Fill>
                              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                   <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#fdfdff" Offset="0.5"/>
                                        <GradientStop Color="#d4d9e0" Offset="0.5"/>
                                   </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                         </Path.Fill>
                    </Path>
                    <Path  StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 17.083496,17.666504 C 17.083496,19.323730 15.740723,20.666504 14.083496,20.666504 L 13.500488,20.666504 C 11.843262,20.666504 10.500488,19.323730 10.500488,17.666504 L 10.500488,3.500000 C 10.500488,1.843262 11.843262,0.500000 13.500488,0.500000 L 14.083496,0.500000 C 15.740723,0.500000 17.083496,1.843262 17.083496,3.500000 L 17.083496,17.666504 Z">
                         <Path.Fill>
                              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                   <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#fdfdff" Offset="0.5"/>
                                        <GradientStop Color="#d4d9e0" Offset="0.5"/>
                                   </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                         </Path.Fill>
                    </Path>
               </Canvas>
          </Canvas>

          <!-- Rewind -->
          <Canvas Canvas.Left="79" Canvas.Top="13.5" MouseLeftButtonDown="javascript:RewindLeftButtonDown" MouseLeftButtonUp="javascript:RewindMouseUp" MouseEnter="javascript:RewindMouseEnter" MouseLeave="javascript:RewindMouseLeave">
               <!-- bgd -->
               <Path StrokeThickness="1" Stroke="#7592ad" Data="F1 M 50.833496,23.250000 C 50.833496,23.250000 43.583496,10.250000 50.833496,0.500000 L 4.833496,0.500000 C 4.833496,0.500000 -4.916504,9.208008 4.833496,23.208008 L 50.833496,23.250000 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#cedbea" Offset="0"/>
                                   <GradientStop Color="#52637e" Offset="0.3"/>
                                   <GradientStop Color="#52637e" Offset="0.5"/>
                                   <GradientStop Color="#121417" Offset="0.5"/>
                                   <GradientStop Color="#0e2233" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- glow -->
               <Path x:Name="rewindGlow" Opacity="0" Data="F1 M 50.833496,23.250000 C 50.833496,23.250000 43.583496,10.250000 50.833496,0.500000 L 4.833496,0.500000 C 4.833496,0.500000 -4.916504,9.208008 4.833496,23.208008 L 50.833496,23.250000 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#ffcedbea" Offset="0"/>
                                   <GradientStop Color="#00ffffff" Offset="0.3"/>
                                   <GradientStop Color="#0054abbc" Offset="0.7"/>
                                   <GradientStop Color="#54abbc" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- icons -->
               <Path Canvas.Left="13" Canvas.Top="5" StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 12.048828,1.627930 C 12.048828,1.627930 12.254883,-0.071289 10.942383,0.701172 L 0.880859,6.228516 C 0.880859,6.228516 -0.071289,6.692383 1.035156,7.412598 L 11.044922,13.196777 C 11.044922,13.196777 12.048828,13.866699 12.048828,12.631348 L 12.048828,1.627930 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <Path Canvas.Left="25" Canvas.Top="5" StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 12.048828,1.627930 C 12.048828,1.627930 12.254883,-0.071289 10.942383,0.701172 L 0.880859,6.228516 C 0.880859,6.228516 -0.071289,6.692383 1.035156,7.412598 L 11.044922,13.196777 C 11.044922,13.196777 12.048828,13.866699 12.048828,12.631348 L 12.048828,1.627930 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
          </Canvas>

          <!-- FForward -->
          <Canvas Canvas.Left="169" Canvas.Top="13.5" MouseLeftButtonDown="javascript:FForwardLeftButtonDown" MouseLeftButtonUp="javascript:FForwardMouseUp" MouseEnter="javascript:FForwardMouseEnter" MouseLeave="javascript:FForwardMouseLeave">
               <!-- bgd -->
               <Path StrokeThickness="1.000000" Stroke="#7592ad" Data="F1 M 0.995117,23.250000 C 0.995117,23.250000 8.245117,10.250000 0.995117,0.500000 L 46.995117,0.500000 C 46.995117,0.500000 56.745117,9.208008 46.995117,23.208008 L 0.995117,23.250000 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#cedbea" Offset="0"/>
                                   <GradientStop Color="#52637e" Offset="0.3"/>
                                   <GradientStop Color="#52637e" Offset="0.5"/>
                                   <GradientStop Color="#121417" Offset="0.5"/>
                                   <GradientStop Color="#0e2233" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- glow -->
               <Path x:Name="fforwardGlow" Opacity="0" Data="F1 M 0.995117,23.250000 C 0.995117,23.250000 8.245117,10.250000 0.995117,0.500000 L 46.995117,0.500000 C 46.995117,0.500000 56.745117,9.208008 46.995117,23.208008 L 0.995117,23.250000 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#ffcedbea" Offset="0"/>
                                   <GradientStop Color="#00ffffff" Offset="0.3"/>
                                   <GradientStop Color="#0054abbc" Offset="0.7"/>
                                   <GradientStop Color="#54abbc" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <!-- icons -->
               <Path Canvas.Left="15" Canvas.Top="5" StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 0.511719,1.627930 C 0.511719,1.627930 0.305664,-0.071289 1.618164,0.701172 L 11.680176,6.228516 C 11.680176,6.228516 12.632324,6.692383 11.525879,7.412598 L 1.515625,13.196777 C 1.515625,13.196777 0.511719,13.866699 0.511719,12.631348 L 0.511719,1.627930 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
               <Path Canvas.Left="27" Canvas.Top="5" StrokeThickness="1" Stroke="#cc2a4ba3" Data="F1 M 0.511719,1.627930 C 0.511719,1.627930 0.305664,-0.071289 1.618164,0.701172 L 11.680176,6.228516 C 11.680176,6.228516 12.632324,6.692383 11.525879,7.412598 L 1.515625,13.196777 C 1.515625,13.196777 0.511719,13.866699 0.511719,12.631348 L 0.511719,1.627930 Z">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
          </Canvas>

          <!-- Stop -->
          <Canvas Canvas.Left="43" Canvas.Top="13.5" MouseLeftButtonUp="javascript:StopMouseUp" MouseEnter="javascript:StopMouseEnter" MouseLeave="javascript:StopMouseLeave">
               <Rectangle x:Name="stopBgd" Opacity="0.01"  Width="25" Height="24" RadiusX="3" RadiusY="3">
                    <Rectangle.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#f5f5f6" Offset="0"/>
                                   <GradientStop Color="#677b8e" Offset="0.2"/>
                                   <GradientStop Color="#677b8e" Offset="0.5"/>
                                   <GradientStop Color="#222e42" Offset="0.5"/>
                                   <GradientStop Color="#194c91" Offset="0.8"/>
                                   <GradientStop Color="#54abbc" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Rectangle.Fill>
               </Rectangle>
               <Rectangle Canvas.Left="7" Canvas.Top="6" Width="11" Height="11">
                    <Rectangle.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Rectangle.Fill>
               </Rectangle>
          </Canvas>

          <!-- Mute -->
          <Canvas Canvas.Left="232" Canvas.Top="13.5" MouseLeftButtonUp="javascript:MuteMouseUp" MouseEnter="javascript:MuteMouseEnter" MouseLeave="javascript:MuteMouseLeave">
               <Rectangle x:Name="muteBgd" Opacity="0.01"  Width="25" Height="24" RadiusX="3" RadiusY="3">
                    <Rectangle.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#f5f5f6" Offset="0"/>
                                   <GradientStop Color="#677b8e" Offset="0.2"/>
                                   <GradientStop Color="#677b8e" Offset="0.5"/>
                                   <GradientStop Color="#222e42" Offset="0.5"/>
                                   <GradientStop Color="#194c91" Offset="0.8"/>
                                   <GradientStop Color="#54abbc" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Rectangle.Fill>
               </Rectangle>
               <!-- icon -->
               <Canvas Canvas.Left="4" Canvas.Top="4">
                    <Path Data="F1 M 0.500000,5.521484 L 0.500000,10.438477 L 3.250000,10.521484 L 6.500000,14.354492 L 6.416016,1.438477 L 3.416016,5.271484 L 0.500000,5.521484 Z">
                         <Path.Fill>
                              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                   <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#fdfdff" Offset="0.5"/>
                                        <GradientStop Color="#d4d9e0" Offset="0.5"/>
                                   </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                         </Path.Fill>
                    </Path>
                    <!-- audio 1 -->
                    <Path x:Name="audio1Icon" Canvas.Left="9" Canvas.Top="1" Data="F1 M 0.598633,5.334961 C 0.598633,5.334961 2.347656,6.917969 0.514648,8.417969 L 0.598633,9.834961 C 0.598633,9.834961 2.932617,9.751953 3.098633,6.834961 C 3.098633,6.834961 3.015625,3.918945 0.598633,3.751953 L 0.598633,5.334961 Z">
                         <Path.Fill>
                              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                   <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#fdfdff" Offset="0.5"/>
                                        <GradientStop Color="#d4d9e0" Offset="0.5"/>
                                   </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                         </Path.Fill>
                    </Path>
                    <!-- audio 2 -->
                    <Path x:Name="audio2Icon" Canvas.Left="8" Canvas.Top="1" Data="F1 M 2.264648,0.584961 L 2.181641,2.667969 C 2.181641,2.667969 5.348633,3.417969 5.431641,6.834961 C 5.431641,6.834961 5.598633,9.834961 2.348633,10.834961 L 2.348633,12.584961 C 2.348633,12.584961 7.348633,11.834961 7.348633,6.834961 C 7.348633,6.834961 7.347656,1.417969 2.264648,0.584961 Z">
                         <Path.Fill>
                              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                   <LinearGradientBrush.GradientStops>
                                        <GradientStop Color="#fdfdff" Offset="0.5"/>
                                        <GradientStop Color="#d4d9e0" Offset="0.5"/>
                                   </LinearGradientBrush.GradientStops>
                              </LinearGradientBrush>
                         </Path.Fill>
                    </Path>
                    <!-- mutedIcon -->
                    <Canvas x:Name="mutedIcon" Opacity="0" Canvas.Left="7" Canvas.Top="2">
                         <!-- Bubble -->
                         <Ellipse StrokeThickness="1" Stroke="#8c0a0b"  Width="11" Height="11">
                              <Ellipse.Fill>
                                   <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <LinearGradientBrush.GradientStops>
                                             <GradientStop Color="#ff7979" Offset="0"/>
                                             <GradientStop Color="#f90000" Offset="1"/>
                                        </LinearGradientBrush.GradientStops>
                                   </LinearGradientBrush>
                              </Ellipse.Fill>
                         </Ellipse>
                         <Path Canvas.Left="2.7" Canvas.Top="3.3" Fill="#fff" StrokeThickness="1" Stroke="#fff" Data="F1 M 1.687988,0.158203 L 4.922363,3.111328 C 4.922363,3.111328 5.625488,-0.826172 1.687988,0.158203 Z"></Path>
                         <Path Canvas.Left="2.5" Canvas.Top="3.7" Fill="#fff" StrokeThickness="1" Stroke="#fff" Data="F1 M 3.282715,4.780762 L 0.048828,1.828125 C 0.048828,1.828125 -0.654297,5.765137 3.282715,4.780762 Z"></Path>
                    </Canvas>
               </Canvas>
          </Canvas>

          <!-- Resize -->
          <Canvas Canvas.Left="278" Canvas.Top="17" MouseLeftButtonUp="javascript:ResizeMouseUp" MouseEnter="javascript:ResizeMouseEnter" MouseLeave="javascript:ResizeMouseLeave">
               <Rectangle x:Name="resizeBgd" Opacity="0.01"  Width="20" Height="18" RadiusX="3" RadiusY="3">
                    <Rectangle.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#f5f5f6" Offset="0"/>
                                   <GradientStop Color="#677b8e" Offset="0.2"/>
                                   <GradientStop Color="#677b8e" Offset="0.5"/>
                                   <GradientStop Color="#222e42" Offset="0.5"/>
                                   <GradientStop Color="#194c91" Offset="0.8"/>
                                   <GradientStop Color="#54abbc" Offset="1"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Rectangle.Fill>
               </Rectangle>
               <Rectangle StrokeThickness="1" Stroke="#d4d9e0" Canvas.Left="4" Canvas.Top="4" Width="12" Height="11" />
               <!-- icon -->
               <Path Canvas.Left="7" Canvas.Top="6" Data="F1 M 0.639648,6.625000 L 5.014648,4.000000 L 6.639648,5.250000 L 6.639648,0.500000 L 1.514648,0.500000 L 3.452148,2.437500 L 0.389648,6.250000">
                    <Path.Fill>
                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                              <LinearGradientBrush.GradientStops>
                                   <GradientStop Color="#fdfdff" Offset="0.5"/>
                                   <GradientStop Color="#d4d9e0" Offset="0.5"/>
                              </LinearGradientBrush.GradientStops>
                         </LinearGradientBrush>
                    </Path.Fill>
               </Path>
          </Canvas>

     </Canvas>

     <TextBlock x:Name="mediaTime" Foreground="White" FontFamily="Verdana" FontSize="10" Canvas.Left="140" Canvas.Top="486">0:00</TextBlock>
     
</Canvas>
